﻿@{
    ViewBag.Title = "UploadSongPage";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<link href="../../Styles/Validate/cmxform.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/UploadMultiFiles/jquery.MultiFile.js" type="text/javascript"></script>
<script src="../../Scripts/UploadMultiFiles/jquery.MetaData.js" type="text/javascript"></script>
<script src="../../Scripts/fileuploader.js" type="text/javascript"></script>
<link href="../../Styles/fileuploader.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function () {      
        $('#frm').validate({
            rules: {
                filename: { required: true, accept: 'mp3|mp4|wma|wmv|mpeg' },
                songname: { required: true },
                category: { required: true },
                country: { required: true }
            },
            messages: {
                songname: { required: 'Bạn chưa nhập tên bài hát' },
                filename: { required: 'Chọn bài hát bạn muốn upload', accept: 'Chỉ được chọn file có đuôi .mp3, .mp4, .wma, .wmv, .mpeg' },
                category: { required: 'Bạn chưa chọn thể loại bài hát' },
                country: { required: 'Bạn chưa chọn quốc gia' }
                
            }
        });
    });
</script>
@*<script type="text/javascript">
    $(document).ready(function () {
        $("#filename").change(function () {
            var file = this.files[0];
            name = file.name;
            size = file.size;
            type = file.type;
            var songname = $("#songname").val();
            var singername = $("#singername").val();
            var musicianname = $("#musicianname").val();
            var category = $("#category").val();
            var country = $("#country").val();
            var lyrics = $("#lyrics").val();
            var param = { 'songname': songname, 'singername': singername, 'musicianname': musicianname, 'category': category, 'country': country, 'lyrics': lyrics, 'filename': file };
            if (file.name.length < 1) {

            }
//            else if (file.size > 100000) {
//                alert("File is to big");
//            }
//            else if (file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg') {
//                alert("File doesnt match png, jpg or gif");
//            }
            else {
                $('a[id=btnUpload]').click(function () {
//                    var formData = new FormData($('*formId*')[0]);
                    $.ajax({
                        url: '/managesong/ConfirmUploadSong',  //server script to process data
                        type: 'POST',
                        data: param,
                        xhr: function () {  // custom xhr
                            myXhr = $.ajaxSettings.xhr();
                            if (myXhr.upload) { // if upload property exists
                                myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // progressbar
                            }
                            return myXhr;
                        },
                        //Ajax events
                        success: completeHandler = function (data) {                            

                        },
                        // Form data
                       
                        //Options to tell JQuery not to process data or worry about content-type
                        cache: false,
                        contentType: false,
                        processData: false
                    }, 'json');
                });
            }
        });
    });   
</script>*@

<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
<tr>
	<th rowspan="3" class="sized"><img src="../../Images/AdminImages/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
	<th class="topleft"></th>
	<td id="tbl-border-top">&nbsp;</td>
	<th class="topright"></th>
	<th rowspan="3" class="sized"><img src="../../Images/AdminImages/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
</tr>
<tr>
	<td id="tbl-border-left"></td>
	<td>
	<!--  start content-table-inner -->
	<div id="content-table-inner">
	
	<table border="0" width="100%" cellpadding="0" cellspacing="0">
	<tr valign="top">
	<td>
	
	
		<!--  start step-holder -->
		<div id="step-holder">
            <div class="step-no-off">+</div>
			<div class="step-light-left"><a href="/managesong/NoneActiveSong?pageindex=1">Kiểm duyệt</a></div>
			<div class="step-light-right">&nbsp;</div>
			<div class="step-no-off">+</div>
			<div class="step-light-left"><a href="/managesong/viewallsong?pageindex=1">Xem tất cả</a></div>
			<div class="step-light-right">&nbsp;</div>
			<div class="step-no">+</div>
			<div class="step-dark-left"><a href="/managesong/uploadSong">Upload bài hát mới</a></div>
			<div class="step-dark-right">&nbsp;</div>			
			<div class="clear"></div>
		</div>
		<!--  end step-holder -->
	
		<!-- start id-form -->   
        <form id="frm" action="/managesong/ConfirmUploadSong" method="post" enctype="multipart/form-data">
		<table border="0" cellpadding="0" cellspacing="0"  id="id-form">
		<tr>
			<th valign="top">Tên bài hát:</th>
			<td><input type="text" id="songname" name="songname" class="inp-form" /></td>
			<td></td>
		</tr>
		<tr>
			<th valign="top">Ca sĩ:</th>
			<td><input type="text" id="singername" name="singername" class="inp-form" /></td>
			<td>
			@*<div class="error-left"></div>
			<div class="error-inner">This field is required.</div>*@
			</td>
		</tr>
        <tr>
			<th valign="top">Nhạc sĩ:</th>
			<td><input type="text" id="musicianname" name="musicianname" class="inp-form" /></td>
			<td></td>
		</tr>
		<tr>
		<th valign="top">Thể loại:</th>
		<td>	
		<select  class="styledselect_form_1" id="category" name="category">			
			@foreach (ListenMusic.Category_ServiceReference.Category ct in ViewBag.category)
               { 
                    <option value="@ct.CategoryID">@ct.CategoryName</option>
               }
		</select>
		</td>
		<td></td>
		</tr>
		<tr>
		<th valign="top">Quốc gia:</th>
		<td>	
		<select  class="styledselect_form_1" id="country" name="country">			
			@foreach (ListenMusic.Country_ServiceReference.Country ct in ViewBag.country)
               { 
                    <option value="@ct.CountryID">@ct.CountryName</option>
               }
               <option value="3">Quốc gia khác</option>
		</select>
		</td>
		<td></td>
		</tr> 		
		<tr>		
		<td></td>
	</tr>
	<tr>
		<th valign="top">Lời bài hát:</th>
		<td><textarea rows="" cols="" name="lyrics" id="lyrics" class="form-textarea"></textarea></td>
		<td></td>
	</tr>
	<tr>
	<th>Chọn bài hát:</th>
	<td><input type="file" id="filename" name="filename" class="" /></td>
	<td>
	<div class="bubble-left"></div>
	<div class="bubble-inner">MP3, MP4, WMA, WMV, MPEG. Dung lượng tối đa 60MB</div>
	<div class="bubble-right"></div>
	</td>
	</tr>	
	<tr>
		<th>&nbsp;</th>
		<td valign="top">          
			<input type="submit" value="" class="form-submit" />
			<input type="reset" value="" class="form-reset"  />
		</td>
		<td></td>
	</tr>
	</table>
    </form>   
	<!-- end id-form  -->

	</td>
	<td>


</td>
</tr>
<tr>
<td><img src="../../Images/AdminImages/shared/blank.gif" width="695" height="1" alt="blank" /></td>
<td></td>
</tr>
</table>
 
<div class="clear"></div>
 

</div>
<!--  end content-table-inner  -->
</td>
<td id="tbl-border-right"></td>
</tr>
<tr>
	<th class="sized bottomleft"></th>
	<td id="tbl-border-bottom">&nbsp;</td>
	<th class="sized bottomright"></th>
</tr>
</table>









 





<div class="clear">&nbsp;</div>
